<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="../../css/iuapmobile.um.css">
		<link rel="stylesheet" href="../../css/font-icons.css">
		<link rel="stylesheet" type="text/css" href="../../css/iuapmobile.um.listview.css">
		<script src="../../js/summer.js" ></script>
		<script src="../../js/jquery.min.js" ></script>
		<script src="../../js/Frameworks/iuapmobile.frameworks.ui.js" ></script>
		<script src="../../js/knockout.js"></script>
		<script src="../../js/Frameworks/iuapmobile.frameworks.listview.js"></script>
		<style>
			.msg-info {
				position: relative;
			}
			.msg-info .um-badge {
				position: absolute;
				right: -10px;
				font-size: 12px;
			}
			.msg-header {
				width: 40px;
				height: 40px;
				line-height: 40px;
				background: blue;
				border-radius: 50%;
				text-align: center;
				color: white;
			}
		</style>

	</head>
	<body>
		<div class="um-page" id="index">
			<div class="um-header" >
				<!-- <a href="#" class="um-back" onclick="summer.closeWin()" >返回</a> -->
				<h3>服务电话</h3>
			</div> 

			<div id="content" class="um-content p15">

				<div class="um-listview-wrap" id="listview">
					<ul class="um-list um-no-active" data-bind="foreach: data">
						<li class="um-listview-row">
							<a href="#" class="um-list-item um-swipe-action um-no-icon">
							<div class="um-swipe-btns">
								<span class="um-swipe-btn um-delete">删除</span>
							</div>
							<div class="um-list-item-media msg-info">
								<img alt="" data-bind="attr:{'src': img}" width=50>
							</div>
							<div class="um-list-item-inner">
								<div class="um-list-item-body">
									<h4 class="um-media-heading fb f16 um-text-overflow" data-bind="text:sender"></h4>
									<p class="um-gray f14 um-text-overflow" data-bind="text:lastMsg"></p>
								</div>
							</div> </a>
						</li>
					</ul>
				</div>
			</div>

			<!-- <div class="um-footer">

			</div> -->
		</div>

		<script>
			$(function() {
				//Knockout绑定
				var ViewModel = function() {
				};
				var viewModel = new ViewModel();
				var jsonArray = [{
					"sender" : "集团客服电话",
					"img" : "../../img/org1.png",
					"msgNum" : 0,
					"lastMsg" : "400-8888-8888",
					"lastTime" : "15:24"
				}, {
					"sender" : "物业服务电话",
					"img" : "../../img/org2.png",
					"msgNum" : 4,
					"lastMsg" : "400-6666-6666",
					"lastTime" : "12:40"
				}, {
					"sender" : "商城服务电话",
					"img" : "../../img/org3.png",
					"msgNum" : 5,
					"lastMsg" : "400-5678-9012",
					"lastTime" : "12:21"
				}];

				viewModel.data = ko.observableArray(jsonArray);
				ko.applyBindings(viewModel);

				//构造控件实例
				var listview = UM.listview("#listview");

				listview.on("itemClick", function(sender, args) {
					//这里可以处理行点击事件，参数sender即为当前列表实例对象，args对象有2个属性，即rowIndex(行索引)和$target(目标行的jquery对象)

					var phone = viewModel.data()[args.rowIndex].lastMsg;

					UM.confirm({
						title : '呼叫号码',
						text :  phone,
						btnText : ["取消", "呼叫"],
						overlay : true,
						ok : function() {
							summer.callPhone(phone);
						},
					});

				});
				listview.on("itemDelete", function(sender, args) {
					//这是可以编写行删除逻辑，参数sender即为当前列表实例对象，args对象有2个属性，即rowIndex(行索引)和$target(目标行的jquery对象)
					var item = viewModel.data()[args.rowIndex];
					alert("您点击了删除按钮!这一行的数据是" + JSON.stringify(item));
					/* args.$target.slideUp(500, function() {
					 viewModel.data.remove(item);
					 }); */
				});
				listview.on("itemSwipeLeft", function(sender, args) {
					//这里可以处理行左滑事件，参数sender即为当前列表实例对象，args对象有2个属性，即rowIndex(行索引)和$target(目标行的jquery对象)
					sender.showItemMenu(args.$target);

				});
				listview.on("tapHold", function() {
					//这里可以处理长按事件
					console.log("您长按了列表！");
				});
			});
		</script>
	</body>

</html>